<template>
  <div class="business-card-item" :style="computBackGround">
    <p class="title">{{ data.title }}</p>
    <p class="info">
      {{ data.info }} <span>{{ data.num }}</span>
    </p>
    <img :src="data.logoUrl" alt="" />
  </div>
</template>
<script>
export default {
  name: 'businessCard',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    computBackGround() {
      return {
        background: `url(${this.data.bgImgUrl})`,
        backgroundSize: '259px 119px',
        backgroundPosition: 'top right',
        backgroundRepeat: 'no-repeat'
      }
    }
  },
  data() {
    return {}
  }
}
</script>
<style lang="less">
.business-card-item {
  width: 260px;
  height: 120px;
  border: 1px solid transparent;
  position: relative;
  font-family: PingFangSC-Medium;
  &:hover {
    cursor: pointer;
  }
  .title {
    font-size: 20px;
    color: #333;
    letter-spacing: 0;
    margin: 24px 0 0 24px;
  }
  .info {
    font-size: 22px;
    color: #4d84ff;
    letter-spacing: 0;
    margin: 14px 0 0 24px;
    span {
      margin-left: 20px;
    }
  }
  img {
    width: 76px;
    height: 65px;
    position: absolute;
    right: 13px;
    bottom: 0;
  }
}
</style>
